<template>
  <div class="wrapper">
    <!-- 导航栏 -->
    <van-nav-bar
      class="nav-bar animate__fadeInDown animate__animated"
      title="常见问题"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
      fixed
    />
    <van-tabs
      v-model="active"
      scrollspy
      sticky
      class="tabs"
      background="#6ea8f0"
      color="#e15f41"
    >
      <template v-for="(item, index) in data">
        <van-tab class="tab" :title="item.title" :key="index">
          <div class="content-container">
            <div class="title">{{ item.title }}</div>
            <div
              class="question"
              v-for="(wd, index) in item.question"
              :key="index"
            >
              <div class="question-name" v-if="wd.name">{{ wd.name }}</div>
              <div class="question-answer">{{ wd.answer }}</div>
            </div>
          </div>
        </van-tab>
      </template>
    </van-tabs>
    <ljzcbtn class="Ljzcbtn"/>
  </div>
</template>

<script>
import Ljzcbtn from '../../components/common/Ljzcbtn.vue'

export default {
  name: "CommonProblem",
  components: {Ljzcbtn},
  data() {
    return {
      active: 0,
      // 数据列表
      data: [
        {
          title: "租车条件",
          question: [
            {
              name: "租车对年龄、证件有什么要求?",
              answer:
                "年龄在18-70周岁，持有大陆二代身份证原件，国内有效驾驶证原件（超过半年以上，部分门店要求超过实习期）。",
            },
            {
              name: "我用芝麻信用免押金，还需要携带信用卡吗?",
              answer:
                "无需携带信用卡，如芝麻信用免押金失败，您可以下单后通过悟空平台在线支付押金。",
            },
            {
              name: "我没有信用卡，可以租车吗?",
              answer:
                "可以，下单时授权芝麻信用免押金或下单后通过悟空平台线上支付押金。",
            },
            {
              name: "我订车，可以由他人代取车吗?",
              answer:
                "可以的，您可以在下单时，选择取车人，取车人认证通过后，即可代您取车。取车人的年龄证件需遵循以上条件。",
            },
          ],
        },
        {
          title: "车辆押金",
          question: [
            {
              name: "押金是什么?",
              answer: "押金分为车辆押金和违章押金。",
            },
            {
              name: "芝麻信用免押金?",
              answer:
                "根据您的芝麻信用分减免相应的押金额度，最高可减免押金25000，您在提交订单页选择“芝麻信用免押金”后，进行支付宝授权，授权成功后，即可享受芝麻信用免押金服务，免押后您无需支付相应的押金。",
            },
            {
              name: "不能免押，如何支付押金?",
              answer:
                "如果您无法使用芝麻信用免押金，您可以在订单详情页使用支付宝、余额在线支付押金。",
            },
            {
              name: "使用芝麻信用免押金?",
              answer:
                "使用芝麻信用免押金的订单，车辆押金取车前冻结，还车时解冻；违章押金还车时冻结，还车结算后30天若无违章解冻。",
            },
            {
              name: "使用支付宝、余额方式支付的押金?",
              answer:
                "车辆押金取车前支付，还车时退还；违章押金还车时支付，还车结算后30天若无违章退还。",
            },
          ],
        },
        {
          title: "取车流程",
          question: [
            {
              name: null,
              answer: `1、查看订单-订单详情，找到取车地址，或查看短信中的取车地址，于约定时间到该地址取车`,
            },
            {
              name: null,
              answer: `2、身份验证，门店工作人员会对您的身份证、驾驶证进行验证，以保障您的权益；`,
            },
            {
              name: null,
              answer: `3、验车，请您和门店工作人员共同对车身外观进行检查，并拍照留存，并确认油/电表数值；`,
            },
            {
              name: null,
              answer: `4、签署租车合同；`,
            },
            {
              name: null,
              answer: `5、成功使用芝麻信用免押金的订单无需支付押金。未免押的订单需提前在订单详情在线支付押金；`,
            },
            {
              name: null,
              answer: `6、驾离门店，建议您驾驶前先熟悉租用车辆的安全性能：危险警示灯、门锁、头灯及备胎。`,
            },
          ],
        },
        {
          title: "行程修改",
          question: [
            {
              name: "用车中行程有变更如何处理？",
              answer: `若您在用车中，需要变更还车时间，在订单详情页，可以点击【提前还车】或【续租】按钮，进入对应的修改页面；在取车前2小时外，你可以在提前还车／续租页面，变更还车时间，费用多退少补，退还的费用将在还车结算时原路退还。`,
            },
          ],
        },
      ],
    };
  },
  mounted() {
    window.scrollTo(0, 0);
  },
};
</script>

<style lang="scss" scoped>
::v-deep.wrapper {
  position: relative;
  background-color: #6ea8f0;
  .Ljzcbtn {
    position: fixed;
    bottom: 30px;
    left: 62.5px;
  }
  .nav-bar {
    .van-nav-bar__title.van-ellipsis {
      font-size: 18px;
      font-weight: 600;
    }
  }
  .tabs {
    margin-top: 50px;
    .van-tab__text.van-tab__text--ellipsis {
      color: white;
    }
    .van-sticky--fixed {
      border: unset;
    }
    .tab {
      .content-container {
        background-color: hsl(211deg 70% 93%);
        width: 310px;
        height: 600px;
        margin: 20px auto 0;
        border-radius: 10px;
        padding: 20px;
        .title {
          font-size: 18px;
          font-weight: 600;
          margin-bottom: 20px;
        }
        .question {
          &-name {
            font-size: 13px;
            font-weight: 600;
            color: #333;
            margin-bottom: 10px;
          }
          &-answer {
            font-size: 12px;
            color: #333;
            margin-bottom: 10px;
            letter-spacing: 1px;
            line-height: 20px;
          }
        }
      }
    }
  }
}
</style>